<template>
    <div class="app">
      <n-message-provider>
        <my-nav></my-nav>
      </n-message-provider>
    </div>
    <router-view v-slot="{ Component, route }">
        <!-- 使用任何自定义过渡和回退到 `fade` -->
        <transition :name="route.meta.transition || 'fade'">
            <component :is="Component" />
        </transition>
    </router-view>
    <my-footer></my-footer>
    <n-back-top listen-to="target" :bottom="80" :visibility-height="10" />
</template>

<script>
  import { defineComponent } from 'vue'

  import Nav from '@/components/Nav.vue'
  import Footer from '@/components/Footer.vue'
  export default defineComponent({
    components:{
      MyNav: Nav,
      MyFooter: Footer
    },
    setup() {

      return {
        transitionName:'SlideRight',

      }
    }
  });
</script>


<style lang="scss">
    @import "./assets/css/iconfont.css";
  .app {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  * {
    margin: 0;
    padding: 0;

  }
  a {
    color: black;
    text-decoration-line: none;
  }
  a:hover {
      color: forestgreen;
  }
  li {
    list-style: none;
  }
    .footer {
        /*z-index: 999;*/
        width: 100%;
        height: 160px;
        margin-top: 10px;
    }
    ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
        background-color:#f8f8f8;
    }
    ::-webkit-scrollbar {//滚动条的宽度
        width:9px;
        height:9px;
    }
    ::-webkit-scrollbar-thumb {//滚动条的设置
        background-color:#dddddd;
        background-clip:padding-box;
        min-height:28px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color:#bbb;
    }
</style>
